{% extends 'base.html' %}


{% block content %}
    <script>
        function bindMyFavorGenres() {
            let liGenresId = []
            $("input:checkbox[name='ck']:checked").each(function () {
                liGenresId.push($(this).val())
            });

            $.ajax({
                type: "post",
                url: '/favor_genres',
                data: JSON.stringify({
                    li_genres_id: liGenresId
                }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                mode: 'same-origin',
                success: (res) => {
                    if (res.code === -1) {
                        // 未登录
                        myAlert(res.msg, 'warning');
                        return
                    }

                    if (res.code === 0) {
                        // 成功

                        let htmlLi = res.data.map(item => {
                            return '<li>' + item.value + '</li>'
                        })

                        $('#my_favor_genres').html(htmlLi)
                    }

                    // 关闭 弹窗
                    $('#my_favor_genre_modal').modal('hide')
                },
                error: function (err) {
                    console.error('error')
                    console.error(err)
                }
            })
        }

        function scoreMovie(movieId, movieIndex, score) {
            $.ajax({
                type: "post",
                url: '/score',
                data: JSON.stringify({
                    movie_id: movieId,
                    score: score
                }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                mode: 'same-origin',
                success: (res) => {
                    if (res.code === -1) {
                        // 未登录
                        myAlert(res.msg, 'warning');
                        return
                    }

                    if (res.code === 0) {
                        // 成功
                        console.log(res.data)

                        myAlert(res.msg, 'success');

                        // 更新数据
                        $(`.movie_score_btn:eq(${movieIndex})`).text(res.data)
                        return
                    }

                    myAlert(res.msg, 'warning');
                },
                error: function (err) {
                    console.error('error')
                    console.error(err)
                }
            })
        }

        function favor(position, movieId, movieIndex) {
            $.ajax({
                type: "post",
                url: '/favor',
                data: JSON.stringify({
                    movie_id: movieId,
                }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                mode: 'same-origin',
                success: (res) => {
                    if (res.code === -1) {
                        // 未登录
                        myAlert(res.msg, 'warning');
                        return
                    }

                    if (res.code === 0) {
                        // 成功
                        {#debugger;#}

                        let nowFavorStatus = res.data

                        myAlert(res.msg, 'success');

                        // 刷新
                        // 在指定刷新的位置，更新 电影的喜欢状态
                        let dom = null;
                        if (position === 'main') {  // 电影列表位置
                            dom = $(`.main_movie_list_favor:eq(${movieIndex})`)
                        } else { // 其他位置为 推荐电影
                            dom = $(`.recommend_movie_list_favor:eq(${movieIndex})`)
                        }

                        if (nowFavorStatus) { // 状态-喜欢
                            dom.removeClass('fa fa-heart-o')
                            dom.addClass('fa fa-heart')
                        } else { // 状态-非喜欢
                            dom.removeClass('fa fa-heart')
                            dom.addClass('fa fa-heart-o')
                        }


                        return
                    }
                    myAlert(res.msg, 'danger');
                },
                error: function (err) {
                    console.error('error')
                    console.error(err)
                }
            })
        }

    </script>

    <div class="main-container" style="margin: 0 auto">
        {% if session.user %}
            {#    左侧 用户-喜爱#}
            <div class="user-favorite">

                {#喜欢的分类#}
                <div class="user-favorite-box card border-success">
                    {#                标题#}
                    <div class="card-header">
                        <strong>Favor Genres</strong>
                    </div>

                    {#                内容#}
                    <div class="card-body text-success">


                        <div>
                            <div style="display: flex;justify-content: flex-end">
                                <button type="button" class="btn btn-link btn-sm"
                                        data-toggle="modal" data-target="#my_favor_genre_modal">Edit
                                </button>
                            </div>


                            <ul id="my_favor_genres" style="font-size: 16px">
                                {% for favorite_genre in li_user_favor_genres %}
                                    <li>{{ favorite_genre.value }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>

                {#推荐#}
                <div class="user-favorite-box card border-warning">
                    {#标题#}
                    <div class="card-header">
                        <strong>Recommend Movies</strong>
                    </div>

                    {#内容#}
                    <div class="card-body">
                        {% for recommend_movie in li_recommend_movie %}
                            <div class="user-favorite-item" style="position: relative">
                                <a href="/details/{{ recommend_movie.id }}">
                                    <img src="{{ url_for('static',filename=recommend_movie.image_path) }}" alt="">
                                </a>

                                <div>
                                    <a href="/details/{{ recommend_movie.id }}">
                                        {{ recommend_movie.name }}
                                    </a>
                                </div>

                                {#喜欢#}
                                <div style="position: absolute;right: 2px;top: 16px">
                                    {% if session.user %}
                                        <i class="{% if recommend_movie.get_user_favor_movie_status() %} fa fa-heart {% else %} fa fa-heart-o {% endif %} recommend_movie_list_favor"
                                           style="color: #DC3545;cursor: pointer"
                                           onclick="favor('recommend',{{ recommend_movie.id }},{{ loop.index0 }})"></i>
                                    {% endif %}
                                </div>
                            </div>
                            <hr>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endif %}


        {#        中间 电影列表#}
        <div class="all-movies card border-primary">
            {#            标题#}
            <div class="card-header" style="">
                <strong>Movies List</strong>
            </div>

            {#            内容#}
            <div class="card-bod">
                {% for movie_item in li_movies %}
                    {% set movie_index = loop.index0 %}

                    {#                单个电影#}
                    <div class="movies-block" title="{{ movie_item.desc }}">
                        {#                左侧图片#}
                        <a href="/details/{{ movie_item.id }}">
                            <img class="movie-left-block" src="{{ url_for('static',filename=movie_item.image_path) }}"
                                 title="{{ movie_item.desc }}"
                                 alt="">
                        </a>
                        {#                    右侧内容#}
                        <div class="movie-right-block">
                            <div class="head-line">
                                <a href="/details/{{ movie_item.id }}">
                                    <div class="movie-title" title="{{ movie_item.name }}">{{ movie_item.name }}</div>
                                </a>
                                <div class="movie-time">{{ movie_item.year }}</div>
                            </div>

                            <div class="movie-others">
                                <div class="movie-others-left">
                                    <ul>
                                        <li>
                                            <div>Directors: {{ movie_item.directors }}</div>
                                        </li>
                                        <li>
                                            <div style="max-height: 120px;overflow-y: auto"
                                                 title="{{ movie_item.actors }}">
                                                Actors: {{ movie_item.actors }}</div>
                                        </li>
                                        <li>
                                            <div style="overflow-y: auto">
                                                Genres:
                                                {% for genre_item in movie_item.get_genres() %}
                                                    {{ genre_item.value }}
                                                {% endfor %}
                                            </div>
                                        </li>
                                        <li>
                                            <div style="max-height: 100px;overflow-y: auto">
                                                Desc: {{ movie_item.desc }}</div>
                                        </li>
                                    </ul>

                                </div>
                                <div class="movie-others-right">

                                    <div style="text-align: right">
                                        {#评分#}
                                        <div class="btn-group" role="group" aria-label="...">
                                            <div class="btn-group" role="group">
                                                <button type="button"
                                                        class="btn btn-outline-primary dropdown-toggle btn-sm movie_score_btn"
                                                        data-toggle="dropdown" aria-haspopup="true"
                                                        aria-expanded="false">
                                                    {{ movie_item.get_avg_score() | default('Score It',true) }}
                                                    <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu" style="min-width: 50px">
                                                    {% for n in range(10) %}
                                                        <li>
                                                            <button class="btn btn-link btn-sm score_btn"
                                                                    onclick="scoreMovie({{ movie_item.id }},{{ movie_index }},{{ 10 - n }})">{{ 10 - n }}
                                                            </button>
                                                        </li>
                                                    {% endfor %}

                                                </ul>
                                            </div>
                                        </div>

                                        {#喜欢#}
                                        <div style="margin-top: 24px">
                                            {% if session.user %}
                                                <i class="{% if movie_item.get_user_favor_movie_status() %} fa fa-heart {% else %} fa fa-heart-o {% endif %} main_movie_list_favor"
                                                   style="color: #DC3545;cursor: pointer"
                                                   onclick="favor('main',{{ movie_item.id }},{{ movie_index }})"></i>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr style="margin: 0px">
                {% endfor %}
            </div>
        </div>

    </div>


    <!-- Modal -->
    <div class="modal fade" id="my_favor_genre_modal" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">My Favor Genres</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {% for genre in li_genres %}
                        <div class="form-check form-check-inline" style="margin: 8px">
                            <input class="form-check-input" type="checkbox" id="myFavorGenres" class="cks" name="ck"
                                   value="{{ genre.id }}">
                            <label class="form-check-label" for="myFavorGenres">{{ genre.value }}</label>
                        </div>
                    {% endfor %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick="bindMyFavorGenres()">Save</button>
                </div>
            </div>
        </div>
    </div>

    <style>
        .main-container {
            width: 1100px;
            margin: 8px 24px;
            display: flex;
            justify-content: space-around;
        }

        .all-movies {
            width: 800px;
        }

        .movies-block {
            padding: 8px;
            border: 1px solid white;
            display: flex;
        }

        .movie-left-block {
            max-width: 180px;
            max-height: 180px;
            object-fit: cover;
            margin-right: 24px;
        }

        .movie-right-block {
            flex: 1;
        }

        .head-line {
            display: flex;
            justify-content: space-between;
        }

        .movie-title {
            font-size: 18px;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #071347;
        }

        .movie-time {
            font-size: 12px;
        }

        .movies-block:hover {
        {#border: 1px solid #d0d0d0;#} background-color: snow;
        }

        .movie-others {
            display: flex;
        }

        .movie-others-left {
            flex: 1;
        }

        .movie-others-right {
            width: 100px;
        }
    </style>

    <style>
        .user-favorite {
            width: 200px;
        }

        .user-favorite-box {
            margin-bottom: 24px;
            font-size: 12px;
        }

        .user-favorite-item {
            display: flex;

        }

        .user-favorite-item img {
            width: 50px;
            min-width: 50px;
            height: 60px;
            min-height: 60px;
            object-fit: cover;
        }

        .user-favorite hr {
            margin: 2px;
        }

    </style>
{% endblock content %}